<!--
 * @Author: dfh
 * @Date: 2024-03-20 09:36:14
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container" :style="{
        'height': titleH + statusBarH + 'px',
        'padding-top': statusBarH + 'px',
        'background': backgroundColor
    }">
        <view class="search-wrap">
            <view class="search-box">
                <text class="iconfont icon-fenxiang txt-black-102"></text>
                <text class="txt-black-102 txt-24 ml-10">搜索</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const props = defineProps({
    backgroundColor: {
        type: String,
        default: 'transparent'//transparent
    }
})
const statusBarH = ref(0);
const titleH = ref(0);
onLoad(() => {
    const sysInfo = uni.getSystemInfoSync();
    const { statusBarHeight } = sysInfo;
    const { height, top } = uni.getMenuButtonBoundingClientRect();
    statusBarH.value = statusBarHeight;
    titleH.value = (top - statusBarHeight) * 2 + height;
})
</script>

<style lang="scss" scoped>
.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    box-sizing: border-box;
    background-color: transparent;
    z-index: 999;

    .search-wrap {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .search-box {
            margin-left: 30rpx;
            width: 400rpx;
            height: 56rpx;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 28rpx;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 30rpx;
        }
    }

    /* .search-wrap {
        margin-left: 30rpx;
        width: 60%;
        display: flex;
        align-items: center;
        border-radius: 30rpx;
        background-color: rgba(255, 255, 255,0.6);
        padding: 0 30rpx;
        box-sizing: border-box;
    } */
}
</style>